<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- !工具条组件 -->
      <PageTools :text="`当前共有${total}条记录`">
        <el-button size="small" type="danger">Excel导入</el-button>
        <el-button size="small" type="warning">普通表头Excel导出</el-button>
        <el-button size="small" type="success">复杂表头Excel导出</el-button>
        <el-button
          size="small"
          type="primary"
          @click="$refs.addEmp.dialogShow = true"
          >新增员工</el-button
        >
      </PageTools>
      <!-- ! 渲染数据 -->
      <el-card>
        <el-table :data="tableData" border>
          <el-table-column label="序号" type="index" sortable="" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column
            label="聘用形式"
            :formatter="formatterFn"
            prop="formOfEmployment"
            sortable=""
          >
            <!-- <template slot-scope="scope">
              <span v-if="scope.row.formOfEmployment === 1">正式</span>
              <span v-else-if="scope.row.formOfEmployment === 2">非正式</span>
              <span v-else>其他</span>
            </template> -->
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <template slot-scope="scope">
              {{ scope.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small" @click="delRow(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page.sync="queryData.page"
          :page-sizes="[10, 40, 80, 100]"
          :page-size="queryData.size"
          layout="total, sizes, prev, pager, next,jumper"
          :total="total"
          background
        >
        </el-pagination>
      </el-card>
      <!-- ! 新增弹框 -->
      <addEmployees ref="addEmp" />
    </div>
  </div>
</template>
<script>
import { getEmployeesListApi, delEmployeesApi } from "@/api/employees";
import EmployeesEnum from "@/api/constant/employees";
import addEmployees from "./components/addEmployees.vue";
export default {
  name: "Employees",
  components: { addEmployees },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 列表接口需要参数
      queryData: {
        page: 1,
        size: 10,
      },
      // 总数
      total: 0,
    };
  },
  created() {
    // 生命周期调用
    this.initData();
  },
  methods: {
    //  获取员工列表数据
    async initData() {
      let { rows, total } = await getEmployeesListApi(this.queryData);
      this.total = total;
      this.tableData = rows;
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.queryData.size = val;
      this.initData();
    },
    // 页码切换事件
    pageChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 对聘用列格式化
    formatterFn(row, column, cellValue, index) {
      // row 行数据, column 列信息, cellValue 单元格值, index  行索引
      // 该函数，return内容则单元格显示什么内容
      let res = EmployeesEnum.hireType.find((item) => item.id === cellValue);
      return res ? res.value : "未知";
    },
    // 删除事件函数
    async delRow(id) {
      // 弹出确认框
      try {
        await this.$confirm("确认删除吗?");
      } catch (error) {
        return console.log(error);
      }
      // 发生请求
      await delEmployeesApi(id);
      // 提示成功
      this.$message.success("删除成功");
      // 边缘问题
      if (this.queryData.page > 1 && this.tableData.length === 1) {
        this.queryData.page--;
      }
      // 列表更新
      this.initData();
    },
  },
};
</script>
<style></style>
